<template>
    <div>
        <div class="e-h-400" :id="id"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    props: {
        id: '',
        data: []
    },
    mounted() {
        var chartDom = document.getElementById(this.id);
        var myChart = echarts.init(chartDom);
        var option;

        //获取数据
        var seriesdata = []
        if(this.data && this.data.length > 0){
            this.data.forEach((item) => {
                seriesdata.push({
                    value: item.count,
                    name: item.name
                })
            })
        }

        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '0',
                left: 'center',
            },
            series: [
                {
                    name: '车辆类型占比',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        formatter: '{d}%',
                        fontSize: 14,
                        color: '#4E5969',
                        // show: false,
                        // position: 'center'
                    },
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 1,
                    },
                    // emphasis: {
                    //   label: {
                    //     show: true,
                    //     fontSize: '40',
                    //     fontWeight: 'bold'
                    //   }
                    // },
                    // labelLine: {
                    //   show: false
                    // },
                    data: seriesdata
                }
            ]
        };
        option && myChart.setOption(option);
    }
}
</script>

<style lang="scss" scoped>

</style>